<!-- header -->
<script src="/libs/jquery-plugins/jquery.cookie.js"></script>

<div class="top">
    <img src="/images/index1.jpg" alt="">
</div>

<div class="banner1">
    <div class="z">
        <img src="/images/index2.jpg" alt="">
        <a href="#">游戏</a>
        <a href="#">硬件</a>
        <a href="#">服务</a>
        <a href="#">最新消息</a>
        <a href="#">购物</a>
        <a href="#">辅助</a>
    </div>
    <div class="y">
        <a href="#">My PlayStation</a>
        <a href="/html/denlu.html" class="btn1" id="dr">登入</a>
        <a href="#" class="btn2" id="dc">登出</a>
        <input type="text" class="search-input" id="search">
        <ul id="container"></ul>
        <a href="#"><img src="/images/index4.jpg" alt=""></a>
    </div>
</div>

<div class="banner2">
    <a href="/index.html" class="img">
        <img src="/images/index5.jpg" alt="">
    </a>
    <ul class="banner3">
        <li><a href="/index.html"><span>游戏</span></a></li>
        <li><a href="/index.html"><span>PlayStation®Plus</span></a></li>
        <li><a href="/html/liebiaoye.html"><span>限时特惠</span></a></li>
        <li><a href="/html/liebiaoye.html"><span>追加内容</span></a></li>
        <li><a href="/html/liebiaoye.html"><span>预售</span></a></li>
        <li><a href="/html/liebiaoye.html"><span>专属推荐</span></a></li>
    </ul>
    <div class="gwc" id="gwc">
        <a href="/html/gouwuche.html">
            <img src="/images/gwc1.jpg" alt="">
            <span id="Num">0</span>
        </a>
    </div>
</div>

<script>
    const ul = document.querySelector('#container')
    const input  =document.querySelector('#search')
    function appendUl (resp) {
      console.log(resp)
      // ES6: 解构赋值
      const { s } = resp
      // const s = resp.s
      ul.innerHTML = ''
      s.forEach(item => {
        var li = document.createElement('li')
        li.innerHTML = item
        ul.appendChild(li)
      })
    }
    input.onkeyup = function () {
      const wd = this.value
    //   utils.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', 'appendUl', { wd })
    jsonp (url, cbName, query) {
    // 拼接url
    url += `?cb=${cbName}`
    if (query) {
      for (var key in query) {
        url += `&${key}=${query[key]}`
      }
    }
    // 创建script
    var script = document.createElement('script')
    script.src = url
    document.body.appendChild(script)
    document.body.removeChild(script)
  }
    }
    input.onblur = function () {
      ul.innerHTML = ''
    }

    // 使用时间委托给所有li写事件
    // 由于鼠标按下的时候input就已经blur了，所以这里不能用click
    ul.onmousedown = function (e) {
      var target = e.target
      if (target.nodeName === "LI") {
        input.value = target.innerHTML
      }
    }
  </script>